﻿@page "/ChartSeriesTypes"
@using System.Drawing
<div class="demo-description">
    <h2>Charts - Series Types</h2>
</div>
<div class="demo-charts-seriestypes card-deck mb-lg-3 pb-lg-3">
    <div class="card">
        <div class="card-body d-flex flex-row">
            <h5 class="card-title mr-3">Line Series</h5>
            <DxComboBox CssClass="ml-auto" Data="@LineSeriesTypes" @bind-Value="@LineSeriesType" TextFieldName="Text"></DxComboBox>
        </div>
        <div class="card-body">
            <DxChart Data="@ChartsData">
                <DxChartCommonSeries NameField="@((SaleInfo s) => s.Date.Year)" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)"  AggregationMethod="Enumerable.Sum" SeriesType="LineSeriesType.Value">
                </DxChartCommonSeries>
                <DxChartLegend Position="RelativePosition.Outside" HorizontalAlignment="HorizontalAlignment.Right" />
            </DxChart>
        </div>
        <div class="card-body">
            <p class="card-text">
                Line chart series visualize data trends over specified intervals.
                In this example, you can switch between the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartLineSeries-3">Line</a>, <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartStackedLineSeries-3">Stacked Line</a>, and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartFullStackedLineSeries-3">Full Stacked Line</a> series types.
                Stacked Line series visualize multiple series and shows each series’ contribution to the total aggregate value for specific arguments.
                Full Stacked Line series display the percentage value of multiple line series for each argument.
            </p>
        </div>
    </div>
    <div class="card">
        <div class="card-body d-flex flex-row">
            <h5 class="card-title mr-3">Area Series</h5>
            <DxComboBox CssClass="ml-auto" Data="@AreaSeriesTypes" @bind-Value="@AreaSeriesType" TextFieldName="Text"></DxComboBox>
        </div>
        <div class="card-body">
            <DxChart Data="@ChartsData">
                <DxChartCommonSeries NameField="@((SaleInfo s) => s.Date.Year)" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" AggregationMethod="Enumerable.Sum" SeriesType="AreaSeriesType.Value">
                </DxChartCommonSeries>
                <DxChartLegend Position="RelativePosition.Outside" HorizontalAlignment="HorizontalAlignment.Right" />
            </DxChart>
        </div>
        <div class="card-body">
            <p class="card-text">
                Area series can be used to emphasize change in values.
                In this example, you can switch between the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartAreaSeries-3">Area</a>, <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartStackedAreaSeries-3">Stacked Area</a>, and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartFullStackedAreaSeries-3">Full Stacked Area</a> series types.
                Stacked Area series visualize multiple series and allow users to determine how a series constitutes the total aggregate value for specific arguments.
                The Full Stacked Area series display the percentage value of multiple area series for each argument.
            </p>
        </div>
    </div>
</div>
<div class="demo-charts-seriestypes card-deck mb-3">
    <div class="card">
        <div class="card-body d-flex flex-row">
            <h5 class="card-title mr-3">Bar Series</h5>
            <DxComboBox CssClass="ml-auto" Data="@BarSeriesTypes" @bind-Value="@BarSeriesType" TextFieldName="Text"></DxComboBox>
        </div>
        <div class="card-body">
            <DxChart Data="@ChartsData">
                <DxChartCommonSeries NameField="@((SaleInfo s) => s.Date.Year)" ArgumentField="@(s => s.City)" ValueField="@(s => s.Amount)" AggregationMethod="Enumerable.Sum" SeriesType="BarSeriesType.Value">
                </DxChartCommonSeries>
                <DxChartLegend Position="RelativePosition.Outside" HorizontalAlignment="HorizontalAlignment.Right" />
            </DxChart>
        </div>
        <div class="card-body">
            <p class="card-text">
                Bar series are used to display values in different discrete categories such as months, countries, age, etc.
                In this example, you can switch between the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartBarSeries-3">Bar</a>, <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartStackedBarSeries-3">Stacked Bar</a>, and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartFullStackedBarSeries-3">Full Stacked Bar</a> series types.
                Stacked Bar series are used when you need to display several series that represent values for discrete categories.
                The Full Stacked Bar series show the value percentage of several bar series for each argument.
            </p>
        </div>
    </div>
    <div class="card">
        <div class="card-body d-flex flex-row">
            <h5 class="card-title">Bubble Series</h5>
        </div>
        <div class="card-body">
            <DxChart Data="@ChartsData">
                <DxChartCommonSeries NameField="@((SaleInfo s) => s.Country)" Filter="@(s => s.Region == "North America")"
                                     ArgumentField="@(s => s.Date.DayOfWeek.ToString())"
                                     ValueField="@(s => s.Date.Year)" SeriesType="ChartSeriesType.Bubble" >
                    <SeriesTemplate>
                        <DxChartBubbleSeries
                                             Settings="@context"
                                             SizeField="@(s => s.Amount)"
                                             Color="@(context.GroupKey == "Canada" ? Color.FromArgb(252, 58, 48) : Color.FromArgb(208, 208, 208))"
                                             AggregationMethod="Enumerable.Max" />
                    </SeriesTemplate>
                </DxChartCommonSeries>
                <DxChartLegend Position="RelativePosition.Outside" HorizontalAlignment="HorizontalAlignment.Right" />
                <DxChartValueAxis Type="ChartAxisType.Discrete">
                    <DxChartAxisLabel Format="ChartAxisLabelFormat.Decimal"></DxChartAxisLabel>
                    @*<DxChartAxisLabel Format="Format.Decimal"></DxChartAxisLabel>*@
                </DxChartValueAxis>
            </DxChart>
        </div>
        <div class="card-body">
            <p class="card-text">
                <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxChartBubbleSeries-4">Bubble</a> series allow you to visualize a data set with three dimensions: coordinates on the axes specify the first two dimensions; the size of the bubble the third.
            </p>
        </div>
    </div>
</div>
@code {

    static readonly IEnumerable<ChartSeriesTypeItem> LineSeriesTypes = ChartSeriesTypeItem.Create(ChartSeriesType.Line, ChartSeriesType.StepLine,
        ChartSeriesType.StackedLine, ChartSeriesType.FullStackedLine);

    static readonly IEnumerable<ChartSeriesTypeItem> AreaSeriesTypes = ChartSeriesTypeItem.Create(ChartSeriesType.Area, ChartSeriesType.FullStackedArea, ChartSeriesType.FullStackedSplineArea,
        ChartSeriesType.SplineArea, ChartSeriesType.StackedArea, ChartSeriesType.StackedSplineArea, ChartSeriesType.StepArea);

    static readonly IEnumerable<ChartSeriesTypeItem> BarSeriesTypes = ChartSeriesTypeItem.Create(ChartSeriesType.Bar, ChartSeriesType.FullStackedBar, ChartSeriesType.StackedBar);

    ChartSeriesTypeItem LineSeriesType { get; set; } = LineSeriesTypes.First();
    ChartSeriesTypeItem AreaSeriesType { get; set; } = AreaSeriesTypes.First();
    ChartSeriesTypeItem BarSeriesType { get; set; } = BarSeriesTypes.First();

    IEnumerable<SaleInfo> ChartsData;

    protected override async Task OnInitializedAsync() {
        ChartsData = await Sales.GetSalesAsync();
    }


    class ChartSeriesTypeItem
    {
        public ChartSeriesTypeItem(ChartSeriesType value) {
            Value = value;
            Text = System.Text.RegularExpressions.Regex.Replace(value.ToString(), "[a-z][A-Z]", m => m.Value[0] + " " + m.Value[1]);
        }
        public string Text { get; }
        public ChartSeriesType Value { get; }

        public static IEnumerable<ChartSeriesTypeItem> Create(params ChartSeriesType[] itemValues) => itemValues.Select(x => new ChartSeriesTypeItem(x)).ToList();
    }
}
